import cbApi from "@rc/apis/cb/index.mjs";
import cbnApi from "@rc/apis/cbn/index.mjs";

export default {
	name: "knowledge-dialog",
	props: {
		//是否显示弹窗
		visibly: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: "选择知识点"
		},
		// 项目名称
		projectName: {
			type: String,
			default: "项目"
		},
		// 科目id
		subjectId: {
			type: String,
			required: true
		},
		// 科目名称
		subjectName: {
			type: String,
			default: "科目"
		},
		// 是否为多选
		isMultiple: {
			type: Boolean,
			default: false
		},
		// 默认选中的知识点，当点击提交确定时会以此数据为基础和当前弹框内选中的数据进行组合，传递出一个最终的列表[{knowledgeId:知识点标识(必须有)....}]，单选时接收只包含一个元素的数组
		defaultData: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			isShow: this.visibly, // 内部的是否显示弹窗
			chapterLoading: false, // 章节树检索状态
			tableLoading: false, // 表格检索状态
			chapterTreeList: [], // 章节树
			chapterId: "", // 当前选中的章节id
			searchParams: {}, // 当前的筛选项信息
			tableList: [], // 表格数据
			selectItems: [], // 当前选中的选项数组(最终要向外传递的列表)(如果是单选类型，最多只会存在一个元素)
			// 筛选器
			filtrateForm: {
				knowledgeStarLevel: "",
				knowledgeTitle: ""
			},
			// 分页信息
			page: {
				pageIndex: 1,
				pageSize: 10,
				pageCount: 0
			}
		};
	},
	watch: {
		// 内部和外部的变量双向绑定
		isShow(val) {
			this.$emit("update:visibly", val);
		},
		visibly(val) {
			this.isShow = val;
		},
		// 科目id变化时更新章节树
		subjectId: {
			handler(val) {
				if (val) {
					this.chapterLoading = true;
					cbApi.queryChapterTree({
						data: {
							subjectId: val,
							chapterLevel: 5 // 最多只要5级的数据
						},
						success: (res) => {
							this.chapterTreeList = [
								{
									chapterId: "",
									chapterTitle: "章节",
									children: res
								}
							];
							this.chapterLoading = false;
						}
					});
				} else {
					this.chapterTreeList = [];
					this.filterReset();
				}
				this.filterReset();
				this.chapterId = "";
			},
			immediate: true
		}
	},
	methods: {
		// 点击查询
		filterSubmit() {
			this.page.pageIndex = 1;
			this.queryTableData();
		},
		// 点击重置
		filterReset() {
			this.page.pageIndex = 1;
			this.filtrateForm.knowledgeStarLevel = "";
			this.filtrateForm.knowledgeTitle = "";
			this.queryTableData();
		},
		// 根据当前记录的选中列表更新表格的选中状态
		updateCheckedState() {
			if (this.isMultiple) {
				// 多选类型，遍历更新每一项的选中状态
				this.tableList.forEach((item) => {
					const bool = this.selectItems.some((i2) => i2.knowledgeId === item.knowledgeId);
					this.$refs.table.toggleRowSelection(item, bool);
				});
			} else {
				if (this.selectItems.length) {
					const item = this.tableList.find((i) => i.knowledgeId === this.selectItems[0].knowledgeId);
					// 单选类型，更新特定项的选中状态
					this.$refs.table.setCurrentRow(item);
				} else {
					this.$refs.table.setCurrentRow();
				}
			}
		},
		// 更新知识点列表
		queryTableData() {
			this.tableLoading = true;
			cbnApi.queryKnowledgeList({
				data: {
					...this.filtrateForm,
					subjectId: this.subjectId,
					chapterId: this.chapterId,
					pageIndex: PageUtil.getStartIndex(this.page),
					pageSize: this.page.pageSize
				},
				success: ({ data, count }) => {
					this.page.pageCount = count;
					this.tableList = (data || []).map(i => ({
                        knowledgeId: i.knowledgeId,
                        knowledgeName: i.knowledgeTitle,
                        knowledgeStarLevel: i.knowledgeStarLevel
                    }));
					this.$nextTick(() => {
						this.updateCheckedState();
						this.tableLoading = false;
					});
				}
			});
		},
		// 点击章节
		onClickChapter({ chapterId }) {
			this.chapterId = chapterId;
			this.page.pageIndex = 1;
			this.queryTableData();
		},
		// 单选选中的表格项变化
		currentChange(data) {
			// 多选时，点击选项也会触发该事件，进行过滤
			if (!this.isMultiple) {
				this.selectItems = [data];
			}
		},
		// 多选选中的表格项变化
		selectionChange(dataArr) {
			if (this.isMultiple) {
				const arr = this.selectItems.filter((i1) => !this.tableList.some((i2) => i2.knowledgeId === i1.knowledgeId)); // 检索出当前已缓存并且当前表格中不存在的选项
				this.selectItems = [...arr, ...dataArr];
			}
		},
		// 点击弹窗确定提交
		onSubmit() {
			this.$emit("submit", this.selectItems);
		}
	},
	created() {
		// 默认选中值发生变化，之前的选项全部作废
		this.selectItems = JSON.parse(JSON.stringify(this.defaultData));
	}
};
